<template>
  <div class="main-containers">
    <div class="body-containers"
         :style='{"minHeight":"100vh","padding":"0","margin":"0","position":"relative","background":"#fff"}'>
      <div class="top-container"
           :style='{"boxShadow":"0 0px 0px rgba(64, 158, 255, .3)","padding":"0 7%","borderColor":"#eee","alignItems":"center","color":"#fff","textAlign":"right","display":"flex","justifyContent":"flex-end","overflow":"hidden","top":"0","borderRadius":"0","left":"0","background":"#111","borderWidth":"0px","width":"100%","fontSize":"14px","lineHeight":"32px","position":"relative","borderStyle":"solid","height":"36px","zIndex":"1002"}'>
        <!-- info -->
        <div
            :style='{"margin":"0","left":"7%","display":"inline-block","width":"auto","position":"absolute","float":"left","height":"32px"}'>
          <span @click="goMenu('/index/home')"
                :style='{"padding":"0px","color":"inherit","alignItems":"center","display":"flex","width":"100%","lineHeight":"1.5","fontSize":"26px","float":"left","fontWeight":"600","height":"32px"}'>高血压健康管理系统</span>
        </div>

        <div v-if="false"
             :style='{"margin":"0 10px","fontSize":"inherit","color":"inherit","display":"inline-block"}'></div>

        <img v-if="headportrait&&Token"
             :style='{"width":"30px","margin":"0px","borderRadius":"50%","display":"inline-block","height":"30px"}'
             :src="headportrait?baseUrl + headportrait:require('@/assets/avator.png')">
        <div v-if="Token"
             :style='{"padding":"0 6px","fontSize":"inherit","lineHeight":"24px","color":"inherit","display":"none","height":"24px"}'>
          {{ username }}
        </div>
        <div v-if="Token && notAdmin"
             :style='{"cursor":"pointer","padding":"0 12px","color":"inherit","display":"inline-block","fontSize":"inherit","lineHeight":"24px","height":"24px"}'
             @click="goMenu('/index/center')">个人中心
        </div>
        <el-button v-if="!Token" @click="toLogin()"
                   :style='{"border":"0px solid #ffffff50","padding":"0 5px","margin":"0px 0 0","color":"#fff","borderRadius":"2px","background":"none","display":"inline-block","fontSize":"14px","lineHeight":"30px","height":"30px"}'>
          登录/注册
        </el-button>
        <el-button v-if="Token" @click="logout"
                   :style='{"border":"0px solid #ffffff50","padding":"0 5px","margin":"0px 0 0","color":"#fff","borderRadius":"2px","background":"none","display":"inline-block","fontSize":"14px","lineHeight":"32px","height":"32px"}'>
          退出
        </el-button>
      </div>


      <div class="menu-preview"
           :style='{"padding":"0","borderColor":"#efefef","margin":"0 auto","background":"#002b49","borderWidth":"0 0 0px 0","width":"100%","borderStyle":"solid","height":"auto"}'>
        <el-scrollbar wrap-class="scrollbar-wrapper-horizontal">
          <el-menu class="el-menu-horizontal-demo"
                   :style='{"border":"0","padding":"0","listStyle":"none","margin":"0","alignItems":"flex-start","background":"none","display":"flex","justifyContent":"center"}'
                   :default-active="activeMenu" :unique-opened="true" mode="horizontal" :router="true"
                   @select="handleSelect">
            <div class="userinfo" :style='{"width":"84px","padding":"6px 10px 0","display":"none","height":"auto"}'>
              <el-image v-if="headportrait&&Token"
                        :style='{"width":"100%","objectFit":"cover","borderRadius":"20px","display":"block","height":"32px"}'
                        :src="headportrait?baseUrl + headportrait:require('@/assets/avator.png')"
                        fit="cover"></el-image>
              <div :style='{"fontSize":"12px","lineHeight":"1.5","color":"#333","textAlign":"center"}'>{{ username }}
              </div>
            </div>
            <el-menu-item class="home" index="/index/home" @click.native="goMenu('/index/home')">
              <span
                  :style='{"padding":"0 10px","margin":"0","color":"inherit","display":"none","width":"14px","lineHeight":"auto","fontSize":"16px","height":"auto"}'
                  class="icon iconfont icon-shouye-zhihui"></span>
              <span
                  :style='{"padding":"0 20px","lineHeight":"auto","fontSize":"17px","color":"inherit","fontWeight":"600","height":"auto"}'>首页</span>
            </el-menu-item>
            <el-menu-item class="item" v-for="(menu, index) in menuList" :index="menu.url" :key="index"
                          @click.native="goMenu(menu.url)">
              <i :style='{"padding":"0 10px","margin":"0","color":"inherit","display":"none","width":"16px","lineHeight":"auto","fontSize":"16px","height":"auto"}'
                 :class="iconArr[index]"></i>
              <span
                  :style='{"padding":"0 20px","lineHeight":"auto","fontSize":"17px","color":"inherit","fontWeight":"600","height":"auto"}'>{{ menu.name }}</span>
            </el-menu-item>
            <el-menu-item class="user" index="/index/center" v-if="Token && notAdmin"
                          @click.native="goMenu('/index/center')">
              <span
                  :style='{"padding":"0 10px","margin":"0","color":"inherit","display":"none","width":"14px","lineHeight":"auto","fontSize":"14px","height":"auto"}'
                  class="icon iconfont icon-shouye-zhihui"></span>
              <span
                  :style='{"padding":"0 10px","lineHeight":"auto","fontSize":"16px","color":"inherit","height":"auto"}'>个人信息</span>
            </el-menu-item>
          </el-menu>
        </el-scrollbar>
      </div>


      <div class="swiper3" :style='{"width":"100%","padding":"0","margin":"0 auto","display":"block","height":"auto"}'>
        <div class="swiper-container mySwiper3">
          <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="item in carouselList" :key="item.id">
              <div :style='{"width":"100%","height":"auto"}'>
                <el-image v-if="preHttp(item.value)" @click="carouselClick(item.url)"
                          :style='{"objectFit":"cover","width":"100%","height":"340px"}' :src="item.value"
                          fit="cover"></el-image>
                <el-image v-else @click="carouselClick(item.url)"
                          :style='{"objectFit":"cover","width":"100%","height":"340px"}' :src="baseUrl + item.value"
                          fit="cover"></el-image>
              </div>
            </div>
          </div>
          <!-- Add Pagination -->
          <div class="swiper-pagination" :style='{"width":"100%","left":"0","bottom":"20px"}'></div>
          <!-- Add Arrows -->
          <div class="swiper-button-next"
               :style='{"width":"24px","margin":"-12px 0 0","top":"50%","display":"none","height":"24px"}'>
            <span class="icon iconfont icon-jiantou18"
                  :style='{"width":"24px","fontSize":"24px","color":"#fff","height":"24px"}'></span>
          </div>
          <div class="swiper-button-prev"
               :style='{"width":"24px","margin":"-12px 0 0","top":"50%","display":"none","height":"24px"}'>
            <span class="icon iconfont icon-jiantou39"
                  :style='{"width":"24px","fontSize":"24px","color":"#fff","height":"24px"}'></span>
          </div>
        </div>
      </div>
      <router-view id="scrollView"></router-view>

      <div class="bottom-preview" :style='{"width":"100%","height":"auto"}'>
        <div
            :style='{"minHeight":"150px","padding":"20px 7%","overflow":"hidden","color":"#fff","textAlign":"center","background":"#282828","width":"100%","fontSize":"14px","height":"auto"}'>
          <div v-html="bottomContent"></div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import Vue from 'vue'
import Swiper from "swiper";

export default {
  data() {
    return {
      activeIndex: '0',
      roleMenus: [{
        "backMenu": [{
          "child": [{
            "allButtons": ["新增", "查看", "修改", "删除"],
            "appFrontIcon": "cuIcon-album",
            "buttons": ["新增", "查看", "修改", "删除"],
            "menu": "用户",
            "menuJump": "列表",
            "tableName": "yonghu"
          }], "menu": "用户管理"
        }, {
          "child": [{
            "allButtons": ["新增", "查看", "修改", "删除"],
            "appFrontIcon": "cuIcon-brand",
            "buttons": ["新增", "查看", "修改", "删除"],
            "menu": "通知公告",
            "menuJump": "列表",
            "tableName": "tongzhigonggao"
          }], "menu": "通知公告管理"
        }, {
          "child": [{
            "allButtons": ["新增", "查看", "修改", "删除", "性别", "年龄", "收缩压", "舒张压", "血糖水平", "导出", "导入", "上传模板", "下载模板", "首页总数"],
            "appFrontIcon": "cuIcon-addressbook",
            "buttons": ["新增", "查看", "修改", "删除", "导出", "导入"],
            "menu": "高血压分析",
            "menuJump": "列表",
            "tableName": "gaoxueyafenxi"
          }], "menu": "高血压分析管理"
        }, {
          "child": [{
            "allButtons": ["新增", "查看", "修改", "删除"],
            "appFrontIcon": "cuIcon-group",
            "buttons": ["查看", "删除"],
            "menu": "论坛交流",
            "tableName": "forum"
          }], "menu": "论坛交流"
        }, {
          "child": [{
            "allButtons": ["新增", "查看", "修改", "删除", "查看评论"],
            "appFrontIcon": "cuIcon-news",
            "buttons": ["新增", "查看", "修改", "删除", "查看评论"],
            "menu": "高血压知识",
            "tableName": "news"
          }, {
            "allButtons": ["新增", "查看", "修改", "删除"],
            "appFrontIcon": "cuIcon-news",
            "buttons": ["新增", "查看", "修改", "删除"],
            "menu": "高血压知识分类",
            "tableName": "newstype"
          }, {
            "allButtons": ["查看", "修改"],
            "appFrontIcon": "cuIcon-pic",
            "buttons": ["查看", "修改"],
            "menu": "系统简介",
            "tableName": "systemintro"
          }, {
            "allButtons": ["新增", "查看", "修改", "删除"],
            "appFrontIcon": "cuIcon-keyboard",
            "buttons": ["查看", "修改", "删除"],
            "menu": "轮播图管理",
            "tableName": "config"
          }], "menu": "系统管理"
        }],
        "frontMenu": [{
          "child": [{
            "allButtons": ["新增", "查看", "修改", "删除"],
            "appFrontIcon": "cuIcon-form",
            "buttons": ["查看"],
            "menu": "通知公告列表",
            "menuJump": "列表",
            "tableName": "tongzhigonggao"
          }], "menu": "通知公告模块"
        }, {
          "child": [{
            "allButtons": ["新增", "查看", "修改", "删除", "性别", "年龄", "收缩压", "舒张压", "血糖水平", "导出", "导入", "上传模板", "下载模板", "首页总数"],
            "appFrontIcon": "cuIcon-keyboard",
            "buttons": ["查看"],
            "menu": "高血压分析列表",
            "menuJump": "列表",
            "tableName": "gaoxueyafenxi"
          }], "menu": "高血压分析模块"
        }],
        "hasBackLogin": "是",
        "hasBackRegister": "否",
        "hasFrontLogin": "否",
        "hasFrontRegister": "否",
        "roleName": "管理员",
        "tableName": "users"
      }, {
        "backMenu": [],
        "frontMenu": [{
          "child": [{
            "allButtons": ["新增", "查看", "修改", "删除"],
            "appFrontIcon": "cuIcon-form",
            "buttons": ["查看"],
            "menu": "通知公告列表",
            "menuJump": "列表",
            "tableName": "tongzhigonggao"
          }], "menu": "通知公告模块"
        }, {
          "child": [{
            "allButtons": ["新增", "查看", "修改", "删除", "性别", "年龄", "收缩压", "舒张压", "血糖水平", "导出", "导入", "上传模板", "下载模板", "首页总数"],
            "appFrontIcon": "cuIcon-keyboard",
            "buttons": ["查看"],
            "menu": "高血压分析列表",
            "menuJump": "列表",
            "tableName": "gaoxueyafenxi"
          }], "menu": "高血压分析模块"
        }],
        "hasBackLogin": "否",
        "hasBackRegister": "否",
        "hasFrontLogin": "是",
        "hasFrontRegister": "是",
        "roleName": "用户",
        "tableName": "yonghu"
      }],
      baseUrl: '',
      carouselList: [],
      menuList: [],
      form: {
        ask: '',
        userid: localStorage.getItem('frontUserid')
      },
      headportrait: localStorage.getItem('frontHeadportrait') ? localStorage.getItem('frontHeadportrait') : '',
      Token: localStorage.getItem('frontToken'),
      username: localStorage.getItem('username'),
      notAdmin: localStorage.getItem('frontSessionTable') != '"users"',
      timer: '',
      iconArr: [
        'el-icon-star-off',
        'el-icon-goods',
        'el-icon-warning',
        'el-icon-question',
        'el-icon-info',
        'el-icon-help',
        'el-icon-picture-outline-round',
        'el-icon-camera-solid',
        'el-icon-video-camera-solid',
        'el-icon-video-camera',
        'el-icon-bell',
        'el-icon-s-cooperation',
        'el-icon-s-order',
        'el-icon-s-platform',
        'el-icon-s-operation',
        'el-icon-s-promotion',
        'el-icon-s-release',
        'el-icon-s-ticket',
        'el-icon-s-management',
        'el-icon-s-open',
        'el-icon-s-shop',
        'el-icon-s-marketing',
        'el-icon-s-flag',
        'el-icon-s-comment',
        'el-icon-s-finance',
        'el-icon-s-claim',
        'el-icon-s-opportunity',
        'el-icon-s-data',
        'el-icon-s-check'
      ],
      bottomContent: '',
    }
  },
  created() {
    this.baseUrl = this.$config.baseUrl;
    this.menuList = this.$config.indexNav;
    this.getCarousel();
    if (localStorage.getItem('frontToken') && localStorage.getItem('frontToken') != null) {
      this.getSession()
    }
  },
  mounted() {
    this.activeIndex = localStorage.getItem('keyPath') || '0';


    // banner
    setTimeout(() => {
      new Swiper(".mySwiper3", {
        "navigation": {"nextEl": ".swiper-button-next", "prevEl": ".swiper-button-prev"},
        "pagination": {"el": ".swiper-pagination", "clickable": true},
        "autoplay": {"delay": 2500, "disableOnInteraction": false},
        "effect": "fade"
      })
    }, 500)

  },
  computed: {
    activeMenu() {
      const route = this.$route
      const {
        meta,
        path
      } = route
      // if st path, the sidebar will highlight the path you sete
      if (meta.activeMenu) {
        return meta.activeMenu
      }
      return path
    },
  },
  watch: {
    $route(newValue) {
      let that = this
      let url = window.location.href
      let arr = url.split('#')
      for (let x in this.menuList) {
        if (newValue.path == this.menuList[x].url) {
          this.activeIndex = x
        }
      }
      this.Token = localStorage.getItem('frontToken')
      if (arr[1] != '/index/home') {
        var element = document.getElementById('scrollView');
        var distance = element.offsetTop;
        window.scrollTo(0, distance)
      } else {
        window.scrollTo(0, 0)
      }
    },
    headportrait() {
      this.$forceUpdate()
    },
  },
  methods: {
    preHttp(str) {
      return str && str.substr(0, 4) == 'http';
    },

    async getSession() {
      await this.$http.get(`${localStorage.getItem('UserTableName')}/session`, {emulateJSON: true}).then(async res => {
        if (res.data.code == 0) {
          localStorage.setItem('sessionForm', JSON.stringify(res.data.data))
          localStorage.setItem('frontUserid', res.data.data.id);
          if (res.data.data.vip) {
            localStorage.setItem('vip', res.data.data.vip);
          }
          if (res.data.data.touxiang) {
            this.headportrait = res.data.data.touxiang
            localStorage.setItem('frontHeadportrait', res.data.data.touxiang);
          } else if (res.data.data.headportrait) {
            this.headportrait = res.data.data.headportrait
            localStorage.setItem('frontHeadportrait', res.data.data.headportrait);
          }
        }
      });
    },
    handleSelect(keyPath) {
      if (keyPath) {
        localStorage.setItem('keyPath', keyPath)
      }
    },
    toLogin() {
      this.$router.push('/login');
    },
    logout() {
      localStorage.clear();
      Vue.http.headers.common['Token'] = "";
      this.$router.push('/index/home');
      this.activeIndex = '0'
      localStorage.setItem('keyPath', this.activeIndex)
      this.Token = ''
      this.$forceUpdate()
      this.$message({
        message: '登出成功',
        type: 'success',
        duration: 1000,
      });
    },
    getCarousel() {
      this.$http.get('config/list', {params: {page: 1, limit: 3}}).then(res => {
        if (res.data.code == 0) {
          this.carouselList = res.data.data.list;
        }
      });
    },
    // 轮播图跳转
    carouselClick(url) {
      if (url) {
        if (url.indexOf('https') != -1) {
          window.open(url)
        } else {
          this.$router.push(url)
        }
      }
    },
    goBackend() {
      localStorage.setItem('Token', localStorage.getItem('frontToken'));
      localStorage.setItem('role', localStorage.getItem('frontRole'));
      localStorage.setItem('sessionTable', localStorage.getItem('frontSessionTable'));
      localStorage.setItem('headportrait', localStorage.getItem('frontHeadportrait'));
      localStorage.setItem('userid', localStorage.getItem('frontUserid'));
      window.location.href = `${this.$config.baseUrl}admin/dist/index.html`

    },
    goMenu(path) {
      this.$router.push(path);
    },
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.menu-preview {
  .el-scrollbar {
    height: 100%;

    & /deep/ .scrollbar-wrapper-vertical {
      overflow-x: hidden;
    }

    & /deep/ .scrollbar-wrapper-horizontal {
      overflow-y: hidden;

      .el-scrollbar__view {
        white-space: nowrap;
      }
    }
  }
}


.menu-preview .el-menu-horizontal-demo .el-menu-item.home {
  cursor: pointer;
  padding: 0 0px;
  margin: 0;
  color: #fff;
  white-space: nowrap;
  display: flex;
  font-size: 16px;
  border-color: #eccc19;
  line-height: 80px;
  background: none;
  justify-content: center;
  border-width: 0 0 0px;
  align-items: center;
  position: relative;
  border-style: solid;
  list-style: none;
  height: 80px;
}

.menu-preview .el-menu-horizontal-demo .el-menu-item.home:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.10);
  border-color: #4a576a;
  border-width: 0 0 0px;
  border-style: solid;
}

.menu-preview .el-menu-horizontal-demo .el-menu-item.home.is-active {
  color: #fff;
  background: rgba(255, 255, 255, 0.10);
  border-color: #4a576a;
  border-width: 0 0 0px;
  border-style: solid;
}

.menu-preview .el-menu-horizontal-demo .el-menu-item.user {
  cursor: pointer;
  border: 0;
  padding: 0 12px;
  color: #333;
  white-space: nowrap;
  display: none;
  font-size: 16px;
  line-height: 44px;
  background: none;
  align-items: center;
  position: relative;
  list-style: none;
  height: 44px;
  order: 3;
}

.menu-preview .el-menu-horizontal-demo .el-menu-item.user:hover {
  color: #f95927;
  border-color: #f95927;
  border-width: 0 0 2px;
  border-style: solid;
}

.menu-preview .el-menu-horizontal-demo .el-menu-item.user.is-active {
  color: #f95927;
  border-color: #f95927;
  border-width: 0 0 2px;
  border-style: solid;
}

.menu-preview .el-menu-horizontal-demo .el-menu-item.service {
  cursor: pointer;
  border: 0;
  padding: 0 12px;
  color: #333;
  white-space: nowrap;
  display: none;
  font-size: 16px;
  line-height: 44px;
  background: none;
  align-items: center;
  position: relative;
  list-style: none;
  height: 44px;
  order: 4;
}

.menu-preview .el-menu-horizontal-demo .el-menu-item.service:hover {
  color: #f95927;
  border-color: #f95927;
  border-width: 0 0 2px;
  border-style: solid;
}

.menu-preview .el-menu-horizontal-demo .el-menu-item.service.is-active {
  color: #f95927;
  border-color: #f95927;
  border-width: 0 0 2px;
  border-style: solid;
}

.menu-preview .el-menu-horizontal-demo .el-menu-item.shop {
  cursor: pointer;
  border: 0;
  padding: 0 12px;
  color: #333;
  white-space: nowrap;
  display: none;
  font-size: 16px;
  line-height: 44px;
  background: none;
  align-items: center;
  list-style: none;
  height: 44px;
  order: 5;
}

.menu-preview .el-menu-horizontal-demo .el-menu-item.shop:hover {
  color: #f95927;
  border-color: #f95927;
  border-width: 0 0 2px;
  border-style: solid;
}

.menu-preview .el-menu-horizontal-demo .el-menu-item.shop.is-active {
  color: #f95927;
  border-color: #f95927;
  border-width: 0 0 2px;
  border-style: solid;
}

.menu-preview .el-menu-horizontal-demo .el-menu-item.back {
  cursor: pointer;
  border: 0;
  padding: 0 12px;
  color: #333;
  white-space: nowrap;
  display: none;
  font-size: 16px;
  line-height: 44px;
  background: none;
  align-items: center;
  position: relative;
  list-style: none;
  height: 44px;
  order: 6;
}

.menu-preview .el-menu-horizontal-demo .el-menu-item.back:hover {
  color: #f95927;
  border-color: #f95927;
  border-width: 0 0 2px;
  border-style: solid;
}

.menu-preview .el-menu-horizontal-demo .el-menu-item.back.is-active {
  color: #f95927;
  border-color: #f95927;
  border-width: 0 0 2px;
  border-style: solid;
}

.menu-preview .el-menu-horizontal-demo .el-menu-item.item {
  cursor: pointer;
  padding: 0 0px;
  margin: 0;
  color: #fff;
  white-space: nowrap;
  display: flex;
  font-size: 16px;
  border-color: rgba(236, 204, 25, .0);
  line-height: 80px;
  background: none;
  justify-content: center;
  border-width: 0 0 0px;
  align-items: center;
  position: relative;
  border-style: solid;
  list-style: none;
  text-align: center;
  height: 80px;
}

.menu-preview .el-menu-horizontal-demo .el-menu-item.item:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.10);
  border-color: #4a576a;
  border-width: 0 0 0px;
  border-style: solid;
}

.menu-preview .el-menu-horizontal-demo .el-menu-item.item.is-active {
  color: #fff;
  background: rgba(255, 255, 255, 0.10);
  border-color: #4a576a;
  border-width: 0 0 0px;
  border-style: solid;
}

.banner-preview {
  .el-carousel /deep/ .el-carousel__indicator button {
    width: 0;
    height: 0;
    display: none;
  }
}

.banner-preview .el-carousel /deep/ .el-carousel__container .el-carousel__arrow--left {
  width: 36px;
  font-size: 12px;
  height: 36px;
}

.banner-preview .el-carousel /deep/ .el-carousel__container .el-carousel__arrow--left:hover {
  background: red;
}

.banner-preview .el-carousel /deep/ .el-carousel__container .el-carousel__arrow--right {
  width: 36px;
  font-size: 12px;
  height: 36px;
}

.banner-preview .el-carousel /deep/ .el-carousel__container .el-carousel__arrow--right:hover {
  background: red;
}

.banner-preview .el-carousel /deep/ .el-carousel__indicators {
  padding: 0;
  margin: 0;
  z-index: 2;
  position: absolute;
  list-style: none;
}

.banner-preview .el-carousel /deep/ .el-carousel__indicators li {
  padding: 0;
  margin: 0 4px;
  background: #fff;
  display: inline-block;
  width: 12px;
  opacity: 0.4;
  transition: 0.3s;
  height: 12px;
}

.banner-preview .el-carousel /deep/ .el-carousel__indicators li:hover {
  padding: 0;
  margin: 0 4px;
  background: #fff;
  display: inline-block;
  width: 24px;
  opacity: 0.7;
  height: 12px;
}

.banner-preview .el-carousel /deep/ .el-carousel__indicators li.is-active {
  padding: 0;
  margin: 0 4px;
  background: #fff;
  display: inline-block;
  width: 24px;
  opacity: 1;
  height: 12px;
}

.chat-content {
  padding-bottom: 20px;
  width: 100%;
  margin-bottom: 10px;
  max-height: 300px;
  height: 300px;
  overflow-y: scroll;
  border: 1px solid #eeeeee;
  background: #fff;

  .left-content {
    float: left;
    margin-bottom: 10px;
    padding: 10px;
    max-width: 80%;
  }

  .right-content {
    float: right;
    margin-bottom: 10px;
    padding: 10px;
    max-width: 80%;
  }
}

.clear-float {
  clear: both;
}


.swiper3 .swiper-button-prev:after {
  display: none;
}

.swiper3 .swiper-button-next:after {
  display: none;
}

.main-containers .swiper3 .swiper-pagination /deep/ span.swiper-pagination-bullet {
  border-radius: 100%;
  margin: 0 4px;
  background: #000;
  display: inline-block;
  width: 12px;
  opacity: .3;
  height: 12px;
}

.main-containers .swiper3 .swiper-pagination /deep/ span.swiper-pagination-bullet:hover {
  background: #f85246;
  opacity: 1;
}

.main-containers .swiper3 .swiper-pagination /deep/ span.swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: #f85246;
  opacity: 1;
}

// -------- search --------
.main-containers .search .select /deep/ .el-input__inner {
  border: 0;
  border-radius: 4px;
  padding: 0 30px 0 10px;
  color: rgba(64, 158, 255, 1);
  width: 180px;
  font-size: 14px;
  height: 44px;
}

.main-containers .search .input /deep/ .el-input__inner {
  border: 0;
  border-radius: 20px 0 0 20px;
  padding: 0 10px 0 20px;
  margin: 0;
  color: rgba(64, 158, 255, 1);
  background: #fff;
  width: 160px;
  font-size: 14px;
  height: 40px;
}

// -------- search --------

.main-containers .btn-service {
  border: 0;
  padding: 0 8px;
  margin: 0 10px;
  color: inherit;
  background: none;
  width: auto;
  font-size: 14px;
  line-height: 32px;
  height: 32px;
}

.main-containers .btn-service:hover {
}

.main-containers .btn-shop {
  border: 0;
  padding: 0 8px;
  margin: 0 10px;
  color: inherit;
  background: none;
  width: auto;
  font-size: 14px;
  line-height: 32px;
  height: 32px;
}

.main-containers .btn-shop:hover {
}
</style>
